<template>
  <el-dialog
    v-model="visible"
    title="退款申请处理详情"
    :close-on-click-modal="true"
    width="80%"
  >
    <el-card shadow="never">
      <span class="font-title-medium">退货商品</span>
      <el-table
        border
        class="standard-margin"
        ref="productTable"
        :data="productList">
        <el-table-column label="商品图片" width="160" align="center">
          <template #default="scope">
            <img style="height:80px" :src="resourcesUrl + scope.row.pic">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template #default="scope">
            <span class="font-small">{{scope.row.prodName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="180" align="center">
          <template #default="scope">
            <span class="font-small">价格：￥{{scope.row.price}}</span><br>
          </template>
        </el-table-column>
        <el-table-column label="属性" width="180" align="center">
          <template #default="scope">{{scope.row.skuName}}</template>
        </el-table-column>
        <el-table-column label="数量" width="100" align="center">
          <template #default="scope">{{scope.row.prodCount}}</template>
        </el-table-column>
      </el-table>
      <div style="float:right;margin-top:15px;margin-bottom:15px">
        <span class="font-title-medium">合计：</span>
        <span class="font-title-medium color-danger">￥{{orderReturnApply.orderAmount}}</span>
      </div>
    </el-card>
    <el-card shadow="never" class="standard-margin">
      <span class="font-title-medium">服务单信息</span>
      <div class="form-container-border">
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small">退款编号</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.refundSn}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
          <el-col class="form-border font-small" :span="18">{{ formatStatus(orderReturnApply.refundSts) }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">退款状态</el-col>
          <el-col class="form-border font-small" :span="18">{{ formatMoneyStatus(orderReturnApply.returnMoneySts) }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small" >订单编号
          </el-col>
          <el-col class="form-border font-small" :span="18" >
            {{orderReturnApply.orderNumber}}
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号
          </el-col>
          <el-col class="form-border font-small" :span="18" style="height:50px">
            {{orderReturnApply.orderNumber}}
            <el-button type="text" size="small" @click="handleViewOrder">查看</el-button>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.applyTime}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">用户编号</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.userId}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.buyerMsg}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片
          </el-col>
          <el-col class="form-border font-small" :span="18" style="height:100px">
            <img v-for="item in photoList" :key="item" style="width:80px;height:80px" :src="item">
          </el-col>
        </el-row>
      </div>
      <!-- <div class="form-container-border">
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small">物流公司名称</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.expressName}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">物流单号</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.expressNo }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">发货时间</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.shipTime }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">收货时间</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveTime}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">收货备注</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveMessage}}</el-col>
        </el-row>
      </div> -->
      <div class="form-container-border">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">退货数量</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.goodsNum}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
          <el-col class="form-border font-small" :span="18">￥{{orderReturnApply.orderAmount}}</el-col>
        </el-row>
        <!-- <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">退款金额
          </el-col>
          <el-col class="form-border font-small" style="height:52px" :span="18">
            ￥
            <el-input size="small" v-model="updateStatusParam.refundAmount"
                      :disabled="orderReturnApply.refundSts!==1"
                      style="width:200px;margin-left: 10px"></el-input>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">申请类型</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.applyType}}</el-col>
        </el-row>
      </div>
      <div class="form-container-border" v-show="orderReturnApply.refundSts!==1">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">处理时间</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.handelTime}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">处理备注</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.sellerMsg}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">拒绝原因</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.rejectMessage}}</el-col>
        </el-row>
      </div>
      <!-- <div class="form-container-border" v-show="orderReturnApply.refundSts===2">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">收货人员</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveMan}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" >收货时间</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveTime | formatTime}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">收货备注</el-col>
          <el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveNote}}</el-col>
        </el-row>
      </div> -->
      <div class="form-container-border" v-show="orderReturnApply.refundSts===1">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">拒绝原因</el-col>
          <el-col class="form-border font-small" :span="18">
            <el-input  size="small" v-model="updateStatusParam.rejectMessage" style="width:200px;margin-left: 10px"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">处理备注</el-col>
          <el-col class="form-border font-small" :span="18">
            <el-input  size="small" v-model="updateStatusParam.sellerMsg" style="width:200px;margin-left: 10px"></el-input>
          </el-col>
        </el-row>
      </div>
      <!-- <div class="form-container-border" v-show="orderReturnApply.refundSts===2">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">收货备注</el-col>
          <el-col class="form-border font-small" :span="18">
            <el-input  size="small" v-model="updateStatusParam.receiveNote" style="width:200px;margin-left: 10px"></el-input>
          </el-col>
        </el-row>
      </div> -->
      <div style="margin-top:15px;text-align: center" v-show="orderReturnApply.refundSts===1">
        <el-button type="primary" size="small" @click="handleUpdateStatus(2)">同意</el-button>
        <el-button type="danger" size="small" @click="handleUpdateStatus(3)">拒绝</el-button>
      </div>
    </el-card>
  </el-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { formatDateTime } from '@/utils/format'
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
const emit = defineEmits(['refreshDataList'])
const productList = ref([])
const photoList = ref([])
const orderReturnApply = ref({})
const updateStatusParam = ref({})

const visible = ref(false)

const init = (refundId) => {
  orderReturnApply.value.refundId = refundId || 0
  visible.value = true
  nextTick(() => {
    updateStatusParam.value = {}
  })
  if (orderReturnApply.value.refundId) {
    // 修改
    http({
      url: http.adornUrl(`/order/return/detail?id=${orderReturnApply.value.refundId}`),
      method: 'get',
      params: http.adornParams()
    })
      .then(({ data }) => {
        orderReturnApply.value = data
        photoList.value = JSON.parse(orderReturnApply.value.photoFiles)
        updateStatusParam.value.refundId = orderReturnApply.value.refundId
        http({
          url: http.adornUrl(`/order/order/orderInfo/${orderReturnApply.value.orderNumber}`),
          method: 'get',
          params: http.adornParams()
        })
          .then(({ data }) => {
            productList.value = data.orderItems
          })
      })
  }
}
defineExpose({ init })

/**
 * 处理
 * @param updateStatusParam
 */
const handleUpdateStatus = (status) => {
  updateStatusParam.value.refundSts = status
  const currentDate = new Date()
  updateStatusParam.value.handelTime = formatDateTime(currentDate)
  console.log('内容是啥：', updateStatusParam.value)
  if (updateStatusParam.value.refundId) {
    // 修改
    http({
      url: http.adornUrl('/order/return/refundSts'),
      method: 'put',
      data: http.adornData({
        refundId: updateStatusParam.value.refundId,
        // refundAmount: updateStatusParam.value.refundAmount,
        sellerMsg: updateStatusParam.value.sellerMsg,
        refundSts: status,
        rejectMessage: updateStatusParam.value.rejectMessage,
        handelTime: updateStatusParam.value.handelTime
      })
    })
      .then(({ data }) => {
        // console.log('你有吗？', data)
        ElMessage({
          message: '操作成功',
          type: 'success',
          duration: 1500,
          onClose: () => {
            updateStatusParam.value.refundId = ''
            // updateStatusParam.value.refundAmount = ''
            updateStatusParam.value.sellerMsg = ''
            updateStatusParam.value.rejectMessage = ''
            updateStatusParam.value.refundSts = ''
            visible.value = false
            emit('refreshDataList')
          }
        })
      })
  }
}

const devyAddRef = ref(null)
/**
 * 申请状态
 * @param refundSts
 */
const formatStatus = (refundSts) => {
  if (refundSts === 1) {
    return '待审核'
  } else if (refundSts === 2) {
    return '同意'
  } else {
    return '不同意'
  }
}
/**
 * 退款状态
 * @param refundSts
 */
const formatMoneyStatus = (returnMoneySts) => {
  if (returnMoneySts === 0) {
    return '退款处理中'
  } else if (returnMoneySts === 1) {
    return '退款成功'
  } else if (returnMoneySts === -1) {
    return '退款失败'
  } else {
    return ''
  }
}
</script>

<style scoped lang="scss">
.standard-margin {
  margin-top: 15px;
}
.form-border {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
}

.form-container-border {
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
  margin-top: 15px;
}

.form-left-bg {
  background: #F2F6FC;
}
</style>
